const { resolve, join } = require("path");
const vueloader = require("vue-loader/dist/plugin").default;
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //用于把HTML页面放入内存
const minicss = require("mini-css-extract-plugin"); //webpack4.0以后的打包css文件
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpackbar = require("webpackbar");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const postcss = require("./postcss");
const htmlplugin = new HtmlWebpackPlugin({
  template: join(__dirname, "./src/index.html"), //源头文件
  filename: "index.html", //生成首页的文件名称
  minify: {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
  },
  environment: {
    arrowFunction: false,
  }, // 打包不使用箭头函数
});
const css = new minicss({
  //输出css独立文件
  // filename: "./static/css/[name].css",
  // chunkFilename: "[name].css" //或者id
  filename: "./static/css/build.css",
});
module.exports.bases = {
  output: {
    filename: "./static/js/[name].js", //通过热加载输出script文件挂载在目录与index.HTML一样
    path: resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".vue", ".json"],
    alias: {
      "@": "../src",
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },

      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: { appendTsSuffixTo: [/\.vue$/] },
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: minicss.loader,
            options: {
              //css插件在预编译配置
            },
          },
          "css-loader",
          postcss,
        ],
      },
      {
        test: /\.less$/, // 匹配特定文件的正则表达式或正则表达式数组
        use: [
          // 应用于模块的 loader 使用列表
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(scss|sass)$/, // 匹配特定文件的正则表达式或正则表达式数组
        use: [
          // 应用于模块的 loader 使用列表
          "style-loader",
          "css-loader",
          "sass-loader",
          postcss,
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|jpg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/img/[name].[ext]",
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/media/[name].[ext]",
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/fonts/[name].[ext]",
        },
      },
    ],
  },
  plugins: [
    htmlplugin,
    css,
    new vueloader(),
    new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin([
      {
        from: resolve(__dirname, "./static"),
        to: "./static",
        ignore: [".*"],
      },
    ]),
    new webpackbar(),
    new CleanWebpackPlugin(),
  ],
};
